import React, { CSSProperties, ReactNode } from 'react';
import { ColumnProps } from 'antd/lib/table';
import { Tag, Button } from 'antd';
import _ from 'lodash';
import * as tools from '@/utils/tools';
import { LOCK_STATUS_TYPE, VIP_LEVEL, TRANSFER_PLATFORMS, DEVICE_TYPE } from './data';

export interface StateType {
  [propName: string]: any;
}

export interface PropType {
  [propName: string]: any;
}

// vip等级的转换
function toVipLevel(val: number) {
  const obj = _.find(VIP_LEVEL, item => item.value === val);
  return obj ? obj.title : '';
}

// 锁定状态的转换
function toLockStatus(val: number | string) {
  const statusObj: any = _.find(LOCK_STATUS_TYPE, item => item.value === (val || 5));
  const { titles, colors } = statusObj;
  if (val === 6) {
    const ele = titles.map((item: any, index: number) => (
      <Tag color={colors[index]}>{titles[index]}</Tag>
    ));
    return ele;
  }

  return <Tag color={colors['0']}>{titles['0']}</Tag>;
}

// 会员状态的转换
function toMemberStatus(val: number) {
  let statusObj: any = {};
  if ([1, 2, 3].includes(val)) {
    statusObj = _.find(LOCK_STATUS_TYPE, item => item.value === val);
  } else {
    statusObj = _.find(LOCK_STATUS_TYPE, item => item.value === 5);
  }
  return <Tag color={statusObj.colors['0']}>{statusObj.titles['0']}</Tag>;
}

// 性别的转换
function toMemberGender(val: number) {
  let str: string;
  if (val === 1) {
    str = '男';
  } else if (val === 2) {
    str = '女';
  } else {
    str = '未知';
  }
  return str;
}

// 注册端
function toRegisterClient(val: number) {
  const obj = _.find(DEVICE_TYPE, item => item.value === val);
  return obj ? obj.title : '';
}

// 会员列表
export const getMemberColumns = (showDetail: Function) => {
  const userNameStyle: CSSProperties = {
    color: '#1690ff',
    cursor: 'pointer',
    textDecoration: 'underLine',
  };

  const columns: ColumnProps<StateType>[] = [
    // 注册时间
    {
      title: '注册时间',
      dataIndex: 'registerDate',
      key: 'registerDate',
      render: text => tools.toTime(text),
      width: '9%',
    },
    // 账户名
    {
      title: '账户名',
      dataIndex: 'username',
      key: 'username',
      width: '9%',
      render: (text, record) => (
        <span style={userNameStyle} onClick={() => showDetail(record)}>
          {text}
        </span>
      ),
    },
    // 姓名
    {
      title: '姓名',
      dataIndex: 'reallyName',
      key: 'reallyName',
      width: '8%',
    },
    // 上级代理
    {
      title: '上级代理',
      dataIndex: 'parentName',
      key: 'parentName',
      width: '9%',
    },
    // 玩家层级
    {
      title: '玩家层级',
      dataIndex: 'levelName',
      key: 'levelName',
      width: '9%',
    },
    // 层级状态
    {
      title: '层级状态',
      dataIndex: 'levelStatus',
      key: 'levelStatus',
      width: '9%',
      render: text => (text === 1 ? '已锁定' : '未锁定'),
    },
    // vip等级
    {
      title: 'vip等级',
      dataIndex: 'vipLevel',
      key: 'vipLevel',
      width: '9%',
      render: text => toVipLevel(text),
    },
    // vip状态
    {
      title: 'vip状态',
      dataIndex: 'lockStatus',
      key: 'lockStatus',
      width: '9%',
      render: text => (text === 0 ? '未锁定' : '已锁定'),
    },
    // 主账户余额
    {
      title: '主账户余额',
      dataIndex: 'balance',
      key: 'balance',
      width: '9%',
      render: text => tools.currency(text),
    },
    // 剩余取款流水
    {
      title: '剩余取款流水',
      dataIndex: 'freezeBalance',
      key: 'freezeBalance',
      width: '10%',
      render: (text, record) => {
        const { freezeBalance, validBalance } = record;
        return tools.currency(freezeBalance - validBalance < 0 ? 0 : freezeBalance - validBalance);
      },
    },
    // 锁定状态
    {
      title: '锁定状态',
      dataIndex: 'status',
      key: 'status',
      width: '10%',
      render: text => toLockStatus(text),
    },
  ];

  return columns;
};

// 会员详情 - 账户余额
export const getBalanceColumns = (
  handleRecycle: Function,
  btns: string[],
  checkPermission: Function,
) => {
  const columns: ColumnProps<StateType>[] = TRANSFER_PLATFORMS.map((item: any) => ({
    title: item.title,
    dataIndex: item.value.toString(),
    render: text => {
      let ele: ReactNode | string;
      if (text === -1) {
        ele = checkPermission(btns, 'member-search-recycle') ? (
          <Button type="link" onClick={() => handleRecycle()}>
            一键回收
          </Button>
        ) : (
          ''
        );
      } else {
        ele = tools.currency(text);
      }
      return ele;
    },
  }));
  return columns;
};

// 会员详情 - 会员资料
export const getMemberDataColumns = () => {
  const columns: ColumnProps<StateType>[] = [
    {
      title: '姓名',
      dataIndex: 'reallyName',
    },
    {
      title: '玩家层级',
      dataIndex: 'levelName',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: text => toMemberStatus(text),
    },
    {
      title: '上级代理',
      dataIndex: 'parentName',
    },
    {
      title: '手机号',
      dataIndex: 'telephone',
    },
    {
      title: '出生日期',
      dataIndex: 'birthday',
      render: text => tools.toTime(text),
    },
    {
      title: '性别',
      dataIndex: 'sex',
      render: text => toMemberGender(text),
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '注册时间',
      dataIndex: 'registerDate',
      render: text => tools.toTime(text),
    },
    {
      title: '注册IP',
      dataIndex: 'registerIp',
    },
    {
      title: '注册地址',
      dataIndex: 'registerDomain',
    },
    {
      title: '注册端',
      dataIndex: 'clientType',
      render: text => toRegisterClient(text),
    },
    {
      title: '上次登录时间',
      dataIndex: 'loginTime',
      render: text => tools.toTime(text),
    },
  ];

  return columns;
};

export function getFinanceInfoColumns() {
  const columns: ColumnProps<StateType>[] = [
    {
      title: '充值次数',
      dataIndex: 'rechargeNum',
    },
    {
      title: '充值总额',
      dataIndex: 'rechargeSum',
      render: text => tools.currency(text),
    },
    {
      title: '提现次数',
      dataIndex: 'withdrawNum',
    },
    {
      title: '提现总额',
      dataIndex: 'withdrawSum',
      render: text => tools.currency(text),
    },
    {
      title: '返水',
      dataIndex: 'rebateSum',
      render: text => tools.currency(text),
    },
    {
      title: '红利',
      dataIndex: 'bonusSum',
      render: text => tools.currency(text),
    },
    {
      title: '总投注',
      dataIndex: 'bettingSum',
      render: text => tools.currency(text),
    },
    {
      title: '总派彩',
      dataIndex: 'prizeSum',
      render: text => tools.currency(text),
    },
    {
      title: '公司输赢',
      dataIndex: 'winSum',
      render: text => tools.currency(-1 * text),
    },
  ];
  return columns;
}

export function getWithdrawColumns() {
  const columns: ColumnProps<StateType>[] = [
    {
      title: '账户余额',
      dataIndex: 'balance',
      render: text => tools.currency(text),
    },
    {
      title: '所需流水',
      dataIndex: 'requireAmount',
      render: text => tools.currency(text),
    },
    {
      title: '已完成投注流水',
      dataIndex: 'validBalance',
      render: text => tools.currency(text),
    },
    {
      title: '剩余流水',
      dataIndex: 'leftAmount',
      render: text => tools.currency(text),
    },
    {
      title: '流水开始统计时间',
      dataIndex: 'lastRecharge',
      render: text => tools.toTime(text),
    },
  ];
  return columns;
}
